<template>
  <div class="data-item-box-item">
    <!-- 左边数据类型展示 -->
    <div class="left-data">
      <img
        class="image-line"
        :src="getimageurl(cardMessage.tc)"
      />
      <!-- {{ cardMessage.tc }} -->
    </div>
    <!-- 中间数据展示 -->
    <div class="center-data">
      <div class="data-one">{{ cardMessage?cardMessage.ta :'' }}</div>
      <div class="data-two">{{ cardMessage?cardMessage.tb:'' }}</div>
      <!-- <div class="data-three">{{ cardMessage.tc }}</div> -->
    </div>
    <!-- 右侧动态百分比 -->
    <!-- <div class="right-data">
      <div>点击查看</div>
      <div>历史数据</div>
    </div> -->
  </div>
</template>
<script>
export default {
  props: {
    nowCardMessage: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      cardMessage: {}
    };
  },
  watch: {
    // var that = this
    nowCardMessage: {
      handler(newvalue, oldvalue) {
        this.cardMessage = {
          ta: newvalue.dataItemName || "",
          tb: (newvalue.latestValue ? newvalue.latestValue : "--") +
            (newvalue.symbol ? newvalue.symbol : ""),
          tc: newvalue.dataTypeName || "",
          dataItemId: newvalue.dataItemId || "",
          td: newvalue.dValue || "", // 百分比
          dataTypeId: newvalue.dataTypeId || "", // 环境数据类型
          ststus: newvalue.direction || "" // 1上 3 下 2平
        };
      },
      deep: true,
      immediate: true
    }
  },
  methods: {

    // 根据数据类型显示对应的图片地址
    getimageurl(name) {
      let url = "";
      switch (true) {
        case name.includes('功率'):
          url = require("@/assets/processing-management/process-management-data/gl.png");
          break;
        case name.includes('温度'):
          url = require("@/assets/processing-management/process-management-data/wd.png");
          break;
        case name.includes('电压'):
          url = require("@/assets/processing-management/process-management-data/dy.png");
          break;
        case name.includes('速度'):
          url = require("@/assets/processing-management/process-management-data/sd.png");
          break;
      }
      return url;
    }
  }
};
</script>
<style lang="scss" scoped>
.animation {
  -webkit-animation: twinkling 1.8s infinite ease-in-out;
  animation: twinkling 1.8s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animation2 {
  -webkit-animation: twinkling 1.8s infinite ease-in-out;
  animation: twinkling 1.8s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes twinkling {
  0% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
  50% {
    opacity: 0.8;
    filter: alpha(opacity=90);
    -webkit-transform: scale(1.12);
  }
  100% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
}
@keyframes twinkling {
  0% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
  50% {
    opacity: 0.8;
    filter: alpha(opacity=90);
    -webkit-transform: scale(1.12);
  }
  100% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
}
.data-item-box-item {
  width: 100%;
  height: 85px;
  background-color: #225768;
  border-radius: 10px 0px 0px 10px;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}
.center-data {
  width: calc(100% - 150px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: space-around;
  white-space: nowrap;
  // border-left: 1px dashed #ddd;
  .data-one {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    &::-webkit-scrollbar {
    height: 2px;
    padding: 1px 0;
}
  }
  .data-two {
    // font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 27px;
    color: #FFFFFF;
    line-height: 40px;
    // border-bottom: 1px solid #ddd;
  }
  // .data-three{
  //     font-size: 14px;
  //     font-weight: 700;
  // }
}
.left-data {
  width: 80px;
  height: 100%;
  padding-right: 5px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  white-space: pre-wrap;
}
.right-data {
  width: 80px;
  height: 85px;
  margin-left: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  color: #003947;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  position: relative;
  left: 9px;
  font-size: 14px;
  cursor: pointer;
  > div {
    padding: 3px 0;
  }
}
.right-data:hover {
  color: #4896ff;
}
.ani {
  animation: 0.1s linear infinite blink;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 25px;
  -webkit-animation: mymove 0.3s linear infinite blink;
}
@keyframes mymove {
  0% {
    color: #fff;
    background-color: #ddd;
  }
  50% {
    background-color: #ddd;
  }
  100% {
    color: #fff;
    background-color: rgb(209, 3, 3);
  }
}
.con-line {
  border-top: 2px #fff solid;
  height: 10px;
  width: 10px;
  // background-color: #fff;
}
</style>
